<template>
  <view class="order-confirmation-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-button" @click="navigateBack">
        <text>←</text>
      </view>
      <view class="navbar-title">
        <text>订单确认</text>
      </view>
      <view class="navbar-right"></view>
    </view>
    
    <!-- 提示信息 -->
    <view class="tips-bar">
      <text>为保证购买顺利，请确认您的个人信息无误</text>
    </view>
    
    <!-- 收货地址 -->
    <view class="address-section">
      <view class="address-info" @click="editAddress">
        <view class="address-main">
          <view class="address-text">
            <view class="address-name-phone">
              <text class="address-name">易晗哈</text>
              <text class="address-phone">18489151666</text>
            </view>
            <view class="address-detail">
              <text>四川省 成都市 龙泉驿区 大面街道 森林公园广场康乐中心3单元6楼</text>
            </view>
          </view>
          <view class="address-arrow">
            <text>→</text>
          </view>
        </view>
        <view class="address-confirm-btn">
          <button>确认</button>
        </view>
      </view>
    </view>
    
    <!-- 商品信息 -->
    <view class="goods-section">
      <view class="goods-item">
        <view class="goods-image">
          <image src="https://img1.baidu.com/it/u=2554333193,3203331229&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image>
        </view>
        <view class="goods-info">
          <view class="goods-name">所属地块:3号地块</view>
          <view class="goods-spec">30ml/盒</view>
          <view class="goods-price-count">
            <view class="goods-price">¥168.0</view>
            <view class="goods-count">X1</view>
          </view>
        </view>
      </view>
      
      <!-- 合计 -->
      <view class="goods-total">
        <text>合计: </text>
        <text class="total-price">¥168.0</text>
      </view>
    </view>
    
    <!-- 金额明细 -->
    <view class="amount-section">
      <view class="amount-item">
        <text class="amount-label">商品金额</text>
        <text class="amount-value">¥168.00</text>
      </view>
      <view class="amount-item">
        <text class="amount-label">商品优惠</text>
        <text class="amount-value">-¥0.00</text>
      </view>
      <view class="amount-item">
        <text class="amount-label">运费</text>
        <text class="amount-value">免邮</text>
      </view>
      <view class="amount-item total">
        <text class="amount-label">需付款</text>
        <text class="amount-value total-price">¥168.0</text>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="order-info-item">
        <text class="order-info-label">订单编号</text>
        <text class="order-info-value">73621549846</text>
      </view>
      <view class="order-info-item">
        <text class="order-info-label">创建时间</text>
        <text class="order-info-value">2018-05-12 09:19:20</text>
      </view>
      <view class="order-info-item">
        <text class="order-info-label">配送方式</text>
        <text class="order-info-value">普通快递</text>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-section">
      <view class="payment-title">
        <text>支付方式</text>
      </view>
      <view class="payment-methods">
        <view class="payment-method" :class="{ 'selected': selectedPayment === 'alipay' }" @click="selectPayment('alipay')">
          <view class="payment-icon">
            <image src="https://img.alicdn.com/tfs/TB13vDqKAL0gK0jSZFxXXa9yXXa-120-120.png" mode="aspectFit"></image>
          </view>
          <view class="payment-name">支付宝</view>
          <view class="payment-check" v-if="selectedPayment === 'alipay'">
            <text>✓</text>
          </view>
        </view>
        <view class="payment-method" :class="{ 'selected': selectedPayment === 'wechat' }" @click="selectPayment('wechat')">
          <view class="payment-icon">
            <image src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" mode="aspectFit"></image>
          </view>
          <view class="payment-name">微信支付</view>
          <view class="payment-check" v-if="selectedPayment === 'wechat'">
            <text>✓</text>
          </view>
        </view>
        <view class="payment-method" :class="{ 'selected': selectedPayment === 'cloud' }" @click="selectPayment('cloud')">
          <view class="payment-icon">
            <image src="https://img.alicdn.com/tfs/TB1YHELe5H1gK0jSZFwXXc7aXXa-144-144.png" mode="aspectFit"></image>
          </view>
          <view class="payment-name">云闪付</view>
          <view class="payment-check" v-if="selectedPayment === 'cloud'">
            <text>✓</text>
          </view>
        </view>
        <view class="more-payment" @click="showMorePayment">
          <text>更多支付方式</text>
          <text>→</text>
        </view>
      </view>
    </view>
    
    <!-- 底部确认栏 -->
    <view class="bottom-bar">
      <view class="bottom-left">
        <text>合计 ¥168.0</text>
        <text>共计1件</text>
      </view>
      <view class="bottom-right">
        <button class="confirm-order-btn" @click="confirmOrder">确认收货</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedPayment: 'wechat' // 默认选择微信支付
    }
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack()
    },
    
    // 编辑地址
    editAddress() {
      console.log('编辑地址')
    },
    
    // 选择支付方式
    selectPayment(payment) {
      this.selectedPayment = payment
    },
    
    // 显示更多支付方式
    showMorePayment() {
      console.log('显示更多支付方式')
    },
    
    // 确认订单
    confirmOrder() {
      console.log('确认订单', this.selectedPayment)
    }
  }
}
</script>

<style scoped>
/* 整体容器 */
.order-confirmation-container {
  font-size: 28rpx;
  color: #333;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92rpx;
  background-color: #2c9cf3;
  color: white;
  padding: 0 30rpx;
}

.back-button {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: bold;
}

/* 提示信息 */
.tips-bar {
  background-color: #fff;
  padding: 24rpx 30rpx;
  color: #666;
  font-size: 28rpx;
}

/* 收货地址 */
.address-section {
  margin-top: 16rpx;
  background-color: #fff;
  padding: 30rpx;
}

.address-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.address-main {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.address-text {
  flex: 1;
}

.address-name-phone {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.address-name {
  font-weight: bold;
  margin-right: 24rpx;
}

.address-detail {
  color: #666;
  line-height: 1.5;
  word-break: break-all;
}

.address-arrow {
  margin-left: 20rpx;
  color: #999;
}

.address-confirm-btn button {
  background-color: #2c9cf3;
  color: white;
  font-size: 28rpx;
  padding: 12rpx 30rpx;
  border-radius: 6rpx;
}

/* 商品信息 */
.goods-section {
  margin-top: 16rpx;
  background-color: #fff;
  padding: 30rpx;
}

.goods-item {
  display: flex;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-right: 24rpx;
}

.goods-image image {
  width: 100%;
  height: 100%;
}

.goods-info {
  flex: 1;
}

.goods-name {
  font-weight: bold;
  margin-bottom: 16rpx;
}

.goods-spec {
  color: #999;
  margin-bottom: 16rpx;
}

.goods-price-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-price {
  color: #e64340;
  font-weight: bold;
}

.goods-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20rpx;
}

.total-price {
  color: #e64340;
  font-weight: bold;
  font-size: 32rpx;
}

/* 金额明细 */
.amount-section {
  margin-top: 16rpx;
  background-color: #fff;
  padding: 30rpx;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.amount-item:last-child {
  border-bottom: none;
}

.amount-item.total {
  font-weight: bold;
  margin-top: 10rpx;
  padding-top: 20rpx;
}

/* 订单信息 */
.order-info-section {
  margin-top: 16rpx;
  background-color: #fff;
  padding: 30rpx;
}

.order-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.order-info-item:last-child {
  border-bottom: none;
}

.order-info-value {
  color: #666;
}

/* 支付方式 */
.payment-section {
  margin-top: 16rpx;
  background-color: #fff;
  padding: 30rpx;
}

.payment-title {
  margin-bottom: 20rpx;
  font-weight: bold;
}

.payment-methods {
  display: flex;
  flex-direction: column;
}

.payment-method {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.payment-method:last-child {
  border-bottom: none;
}

.payment-method.selected {
  color: #2c9cf3;
}

.payment-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 24rpx;
}

.payment-icon image {
  width: 100%;
  height: 100%;
}

.payment-check {
  margin-left: auto;
  font-size: 32rpx;
  color: #2c9cf3;
}

.more-payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  color: #999;
}

/* 底部确认栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  border-top: 1rpx solid #eee;
}

.bottom-left {
  display: flex;
  align-items: center;
  color: #666;
}

.bottom-left text:first-child {
  color: #e64340;
  font-weight: bold;
  margin-right: 16rpx;
}

.confirm-order-btn {
  background-color: #2c9cf3;
  color: white;
  font-size: 32rpx;
  padding: 18rpx 40rpx;
  border-radius: 6rpx;
}
</style>